<template>
  <div class="flex-justify-start flex-gap-5">
    <VariableComponent :variable="inputsObject" @changeState="changeState"></VariableComponent>
    <el-select v-model="inputsObject.type" size="mini" placeholder="请选择变量类型" @change="changeType">
      <el-option v-for="dataTyp in dataTypeArray" :key="dataTyp.value" :label="dataTyp.label"
                 :value="dataTyp.value"></el-option>
    </el-select>
  </div>
</template>

<script>
  import {dataTypeArray} from "@/config/common";
  import VariableComponent from './VariableComponent.vue'

  export default {
    name: "InputsComponent",
    components: {VariableComponent},
    props: {
      inputsObject: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        dataTypeArray: dataTypeArray,
      }
    },
    methods: {
      changeType(type) {
        switch (type) {
          case 'string':
            this.inputsObject.value = '';
            break;
          case 'int':
            this.inputsObject.value = 0;
            break;
          case 'double':
            this.inputsObject.value = 0;
            break;
          case 'bool':
            this.inputsObject.value = false;
            break;
          case 'list':
            this.inputsObject.value = "[]";
            break;
          case 'map':
            this.inputsObject.value = "{}"
            break;
          default:
            break;

        }
        this.changeState()
      },
      changeState() {
        this.$emit('changeState')
      }
    }
  }
</script>

<style scoped>

</style>
